<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogFormRef" label-width="100px">
			<el-form-item :label="$t('dept.parentName')" prop="pid">
				<el-cascader v-model="form.pid" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
			</el-form-item>
			<el-form-item :label="$t('dept.name')" prop="name">
				<el-input v-model="form.name" :placeholder="$t('dept.namePlaceholder')" clearable></el-input>
			</el-form-item>
			<el-form-item :label="$t('common.sort')" prop="sort">
				<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
			</el-form-item>
			<el-form-item :label="$t('common.status')" prop="status">
				<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item :label="$t('common.remark')" prop="remark">
				<el-input v-model="form.remark" clearable type="textarea"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >{{ $t('common.cancel') }}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit">{{ $t('common.save') }}</el-button>
		</template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import api from '@/api';
import i18n from '@/locales';
import { ElMessage } from "element-plus";

// 定义用于发射方法
const emit = defineEmits(['success', 'closed']);
// 定义响应式数据
const mode = ref('add');
const dialogFormRef = ref(null);
const titleMap = reactive({
    add:  i18n.global.t('common.add') + i18n.global.t('dept.dept'),
    edit: i18n.global.t('common.edit') + i18n.global.t('dept.dept'),
    show: i18n.global.t('common.view') + i18n.global.t('dept.dept'),
});
const visible = ref(false);
const isSaveing = ref(false);
const form = reactive({
    id: "",
    pid: 0,
    name: "",
    sort: 100,
    status: 1,
    remark: "",
});
const rules = computed(() => ({
    sort: [{ required: true, message: i18n.global.t('dept.sortPlaceholder'), trigger: 'change' }],
    name: [{ required: true, message: i18n.global.t('dept.namePlaceholder') }],
}));
const groups = ref([]);
const groupsProps = reactive({
    value: "id",
    label: "name",
    emitPath: false,
    checkStrictly: true,
});
// 组件挂载时加载数据
onMounted(() => {
    getGroup(); // 加载树形控件的数据
});
// 自定义显示的方法
const open = (newMode = 'add') => {
    mode.value = newMode;
    visible.value = true;
};
// 自定义加载树形控件数据的方法
const getGroup = async () => {
    const res = await api.setting.dept.list.get();
    // 在 options 中添加一个顶级部门数据项
    const options = [
        { id: 0 , name: i18n.global.t('dept.topName'), children: res.data },
    ];
    groups.value = options;
};
// 自定义提交表单的方法
const submit = () => {
    dialogFormRef.value.validate(async (valid) => {
        if (valid) {
            isSaveing.value = true;
            var res = null;
            try {
                if (mode.value == 'add') {
                    res = await api.setting.dept.add.post(form);
                } else {
                    res = await api.setting.dept.edit.post(form);
                }
                if (res.code == 200) {
                    emit('success', form, mode.value);
                    visible.value = false;
                    ElMessage.success(res.message);
                } else {
                    ElMessage.error(res.message);
                }
            } catch (error) {
                console.error('Error in setting/dept/save/submit action:', error);
            } finally {
                isSaveing.value = false;
            }
        }
    });
};
// 自定义表单注入数据的方法
const setData = (data) => {
    form.id = data.id;
    form.name = data.name;
    form.status = data.status;
    form.sort = data.sort;
    form.pid = data.pid;
    form.remark = data.remark;
};
defineExpose({open, setData});
</script>